<template>
    <view class="scan-container">
        <!-- 扫描区域 -->
        <view class="scan-area">
            <view class="scan-box">
                <view class="scan-line"></view>
            </view>
        </view>

        <!-- 操作按钮 -->
        <view class="action-buttons">
            <button class="scan-button" @click="startScan">开始扫描</button>
        </view>
    </view>
</template>

<script>
export default {
    methods: {
        async startScan() {
            try {
                // 调用微信扫一扫功能
                const res = await uni.scanCode({
                    scanType: ['qrCode'],
                    onlyFromCamera: true
                });

                // 处理扫描结果
                if (res.result) {
                    // 解码Base64字符串
                    console.log('扫描到的原始数据:', res.rawData);
                    
                    const decodedString = this.base64ToUtf8(res.rawData);
                    console.log('解码后的数据:', decodedString);

                    // 解析数据（使用字符串处理方法）
                    const queryString = decodedString.split('?')[1] || '';
                    const params = {};
                    queryString.split('&').forEach(pair => {
                        const [key, value] = pair.split('=');
                        if (key) {
                            params[key] = value || '';
                        }
                    });

                    const storeId = params['store_id'];

                    // 处理解析后的数据
                    if (storeId) {
                        console.log('解析到的store_id:', storeId);
                        uni.navigateTo({
                            url: `/pages/payment/payment?storeId=${storeId}`
                        });
                    } else {
                        uni.showToast({
                            title: '无效的二维码',
                            icon: 'none'
                        });
                    }
                }
            } catch (error) {
                uni.showToast({
                    title: '扫描失败',
                    icon: 'none'
                });
                console.error('扫描失败:', error);
            }
        },
        base64ToUtf8(str) {
            // 使用更可靠的Base64解码方法
            const decoded = decodeURIComponent(escape(atob(str)));
            return decoded;
        }
    }
}
</script>

<style lang="scss">
.scan-container {
    height: 100vh;
    background-color: #000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.scan-area {
    width: 80%;
    height: 60%;
    position: relative;
}

.scan-box {
    width: 100%;
    height: 100%;
    border: 2px solid #fff;
    position: relative;
    overflow: hidden;
}

.scan-line {
    width: 100%;
    height: 2px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff, rgba(255, 255, 255, 0));
    position: absolute;
    top: 0;
    animation: scan 2s linear infinite;
}

@keyframes scan {
    0% {
        top: 0;
    }

    100% {
        top: 100%;
    }
}

.action-buttons {
    margin-top: 40px;
}

.scan-button {
    background-color: #07c160;
    color: #fff;
    border-radius: 25px;
    padding: 10px 30px;
}
</style>
